const { useState, useEffect } = React;
const { Modal, Button, Form, Input, Radio, Switch, Checkbox, message } = antd;





const OptForm = ({ vars, opts, visible, onCancel, onSubmit }) => {
  const [form] = Form.useForm();
  const [options, setOptions] = useState({});
  const [newOptionValues, setNewOptionValues] = useState({});

  useEffect(() => {
    const initialOptions = opts || {};
    const initialValues = {};

    prn(initialOptions, initialValues)
    
    vars.forEach(({ name, type }) => {
      initialOptions[name] = initialOptions[name] || [];
      initialValues[name] = type === 'checkbox' ? [] : type === 'switch' ? false : '';
    });

    setOptions(initialOptions);
    form.setFieldsValue(initialValues);
  }, [opts]);

  const handleAddOption = (fieldName) => {
    const value = newOptionValues[fieldName]?.trim();
    if (value) {
      setOptions(prev => ({
        ...prev,
        [fieldName]: [...(prev[fieldName] || []), value]
      }));
      setNewOptionValues(prev => ({ ...prev, [fieldName]: '' }));
    }
  };

  const handleDeleteOption = (fieldName, option) => {
    const newOptions = options[fieldName].filter(item => item !== option);
    const currentValue = form.getFieldValue(fieldName);
    
    setOptions(prev => ({ ...prev, [fieldName]: newOptions }));
    
    if (Array.isArray(currentValue)) {
      form.setFieldsValue({ [fieldName]: currentValue.filter(v => v !== option) });
    } else if (currentValue === option) {
      form.setFieldsValue({ [fieldName]: newOptions[0] || '' });
    }
  };

  const handleSubmit = () => {
    form.validateFields().then(values => {
      onSubmit({ formValues: values, options });
    });
  };

  return (
    <Modal
      title="动态表单"
      visible={visible}
      onCancel={onCancel}
      onOk={handleSubmit}
      destroyOnClose
      width={600}
    >
      <Form form={form} layout="vertical">
        {vars.map(({ name, type }) => (
          <Form.Item
            key={name}
            name={name}
            label={name}
            valuePropName={type === 'switch' ? 'checked' : 'value'}
          >
            {type === 'input' && <Input />}
            {type === 'switch' && <Switch />}
            
            {type === 'radio' && (
              <Radio.Group>
                {options[name]?.map(option => (
                  <Radio key={option} value={option}>{option}</Radio>
                ))}
              </Radio.Group>
            )}

            {type === 'checkbox' && (
              <Checkbox.Group>
                {options[name]?.map(option => (
                  <Checkbox key={option} value={option}>{option}</Checkbox>
                ))}
              </Checkbox.Group>
            )}

            {(type === 'radio' || type === 'checkbox') && (
              <div style={{ marginTop: 8 }}>
                <div style={{ marginBottom: 8 }}>
                  {options[name]?.map(option => (
                    <Tag
                      key={option}
                      closable
                      onClose={() => handleDeleteOption(name, option)}
                      style={{ margin: 4 }}
                    >
                      {option}
                    </Tag>
                  ))}
                </div>
                <Input
                  value={newOptionValues[name] || ''}
                  onChange={e => setNewOptionValues(prev => ({
                    ...prev,
                    [name]: e.target.value
                  }))}
                  style={{ width: 200, marginRight: 8 }}
                  placeholder="输入新选项"
                />
                <Button onClick={() => handleAddOption(name)}>
                  添加选项
                </Button>
              </div>
            )}
          </Form.Item>
        ))}
      </Form>
    </Modal>
  );
};

